import React, { Component } from 'react'
import { Redirect } from 'react-router-dom';
import "./Login.css";
import Logo from "../../components/logo/Logo";
import { List, InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile';

import { connect } from "react-redux";
import { login, Msg, loginSuccess} from '../../redux/reducers/user.reducer.js';

import axios from "axios";


class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'',
            password:''
        }
        this.loginClick = this.loginClick.bind(this);
        // 测试
        this.loginTestClick = this.loginTestClick.bind(this);
    }

    onChange = (key,value) => {
        this.setState({
            [key]:value
        });
    };

    loginClick(){
        // 使用redux 中的定义的 login 方法
        this.props.login(this.state);
    }

    loginTestClick(){
        // 如果我在此处，自己写方法，dispatch({type:'ACTION_TEST',data});
        // 那么就不用mapDispatchToProps ?  错
        // const store = createStore(reducer);
        // store={store} 挂载到 props上，
        // 子级this.props.store.dispatch触发
        // 子级没有store 拿不到 dispath(store上的方法)
        // 可以在此处处理前奏逻辑，最后将数据传给store处理
        if(!this.state.name || !this.state.password){
            this.props.Msg('账号密码必须填写');
            return false;
        }
        // 异步
        // 此处触发不了action , 交由store中的方法触发action
        axios.post('/userapi/login',this.state).then(res => {
            if(res.status === 200){
                if(res.data.code === 0){
                    // loginSuccess 中会 dispatch action && 传值data
                    console.log(res.data.data)
                    this.props.loginSuccess(res.data.data);
                }else{
                    // 此处msg是后端msg
                    this.props.Msg(res.data.msg);
                }
            }
        })
    }

    render() {
        return (
            <div>
                {/* 登陆成功后重定向 */}
                {this.props.user.redirectPath?<Redirect to={this.props.user.redirectPath}></Redirect>:null}
                <Logo></Logo>
                { this.props.user.msg?
                    <p className="msg">{this.props.user.msg} !</p>
                     : ''
                }
                <WingBlank>
                    <List className="input_box">
                        <InputItem onChange={(val) => this.onChange('name',val)}>用户</InputItem>
                        <WhiteSpace></WhiteSpace>
                        <InputItem type="password" onChange={(val) => this.onChange('password',val)}>密码</InputItem>
                    </List>
                    <WhiteSpace></WhiteSpace>
                    <Button type="primary" onClick={this.loginTestClick}>登 录</Button>
                </WingBlank>
            </div>
        )
    }
}

const mapStateToProps = (state,props)=>{
    return {
        user:state.userReducer
    }
}

export default connect(
    // state => state.userReducer,
    mapStateToProps,
    { login,Msg,loginSuccess }
)(Login);